<script setup>
import { adminLoginService } from '@/api/admin.js'
import { useUserStore } from '@/stores'
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import gsap from 'gsap'
import Vcode from 'vue3-puzzle-vcode'
const router = useRouter()
const userStore = useUserStore()
const formModel = ref({
  username: '',
  password: ''
})
const vcodeShow = ref(false)
const key = 'key'
const adminLogin = async () => {
  if (formModel.value.username === '' || formModel.value.password === '') {
    return
  }
  vcodeShow.value = true
}
const passSuccess = async () => {
  vcodeShow.value = false
  message.loading({ content: '登录中...', key })
  const res = await adminLoginService({
    username: formModel.value.username,
    password: formModel.value.password
  })
  if (res.data.code === 1) {
    message.success({ content: '登录成功!', key, duration: 2 })
    userStore.setToken(res.data.data.token)
    // 执行过渡动画
    await animateTransition()
    router.push('/volunteer')
    await revealTransition()
    gsap.set('.block', { visibility: 'hidden' })
  } else {
    message.error({ content: res.msg, key })
  }
}
const showModal = () => {
  message.info('请联系客服')
}

// 登录后跳转前的过渡动画
const revealTransition = () => {
  return new Promise((resolve) => {
    gsap.set('.block', { scaleY: 1 })
    gsap.to('.block', {
      scaleY: 0,
      duration: 1,
      stagger: {
        each: 0.1,
        from: 'start',
        grid: 'auto',
        axis: 'x'
      },
      ease: 'power4.inOut',
      onComplete: resolve
    })
  })
}

// 跳转后的过渡动画
const animateTransition = () => {
  return new Promise((resolve) => {
    gsap.set('.block', { visibility: 'visible', scaleY: 0 })
    gsap.to('.block', {
      scaleY: 1,
      duration: 1,
      stagger: {
        each: 0.1,
        from: 'start',
        grid: [2, 5],
        axis: 'x'
      },
      ease: 'power4.inOut',
      onComplete: resolve
    })
  })
}
</script>

<template>
  <Vcode
    :show="vcodeShow"
    @success="passSuccess()"
    @close="vcodeShow = false"
  />
  <div>
    <!-- about page content -->
  </div>
  <div class="background-image">
    <h1 class="title">生动科普星管理系统</h1>

    <div class="box">
      <form autocomplete="off">
        <h1>登陆</h1>
        <div class="inputBox">
          <input
            type="text"
            required="required"
            v-model="formModel.username"
          /><span>用户名</span><i></i>
        </div>
        <div class="inputBox">
          <input
            type="password"
            required="required"
            v-model="formModel.password"
          /><span>密码</span><i></i>
        </div>
        <div class="links">
          <a href="#" @click="showModal">忘记密码 ?</a
          ><a href="#" @click="showModal">注册</a>
        </div>
        <input
          type="submit"
          class="submit animated jello"
          value="登录"
          onclick="return false"
          @click="adminLogin()"
        />
      </form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('https://static.zeoseven.com/zsft/245/main/result.css');
.background-image {
  background-image: url('@/assets/主背景2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center 10px;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 60px;
}

.title {
  color: #45f3ff;
  margin-top: 10vh;
  font-size: 65px;
  text-align: left;
  text-shadow: 0 0 100px #0cafe6;
  font-weight: bold;
  background: linear-gradient(to right, #0cafe6 10%, blue 100%);
  background-clip: text;
  color: transparent;
  font-family: 'QiushuiShotai Bright';
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
  background: #23242a;
}

.box {
  position: relative;
  margin-top: 5vh;
  width: 25vw;
  height: 420px;
  background: #1c1c1c;
  border-radius: 8px;
  overflow: hidden;
}

.box::before {
  content: '';
  z-index: 1;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 25vw;
  height: 420px;
  transform-origin: bottom right;
  background: linear-gradient(0deg, transparent, #45f3ff, #09777f);
  animation: animate 6s linear infinite;
}

.box::after {
  content: '';
  z-index: 1;
  position: absolute;
  top: -50%;
  left: -50%;
  width: 25vw;
  height: 420px;
  transform-origin: bottom right;
  background: linear-gradient(0deg, transparent, #45f3ff, #45f3ff);
  animation: animate 6s linear infinite;
  animation-delay: -3s;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

form {
  position: absolute;
  inset: 2px;
  background: hwb(228 16% 82%);
  padding: 50px 40px;
  border-radius: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

h1 {
  color: #45f3ff;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
}

.inputBox {
  position: relative;
  width: 21vw;
  margin-top: 35px;
}

.inputBox input {
  position: relative;
  width: 100%;
  padding: 20px 10px 10px;
  background: transparent;
  outline: 0;
  box-shadow: none;
  border: 0;
  color: #23242a;
  font-size: 1em;
  letter-spacing: 0.05em;
  transition: 0.5s;
  z-index: 10;
}

.inputBox span {
  position: absolute;
  left: 0;
  padding: 20px 0 10px;
  pointer-events: none;
  font-size: 1em;
  color: #8f8f8f;
  letter-spacing: 0.05em;
  transition: 0.5s;
}

.inputBox input:valid ~ span,
.inputBox input:focus ~ span {
  color: #45f3ff;
  transform: translateX(0px) translateY(-34px);
  font-size: 0.75em;
}

.inputBox i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #45f3ff;
  border-radius: 4px;
  overflow: hidden;
  transition: 0.5s;
  pointer-events: none;
  z-index: 9;
}

.inputBox input:valid ~ i,
.inputBox input:focus ~ i {
  height: 44px;
}

.links {
  display: flex;
  justify-content: space-between;
}

.links a {
  margin: 10px 0;
  font-size: 0.75em;
  color: #8f8f8f;
  text-decoration: beige;
}

.links a:hover,
.links a:nth-child(2) {
  color: #45f3ff;
}

input[type='submit'] {
  border: 0;
  outline: 0;
  padding: 11px 25px;
  background: #45f3ff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  width: 120px;
  margin: 0 auto;
  margin-top: 10px;
}

input[type='submit']:active {
  opacity: 0.8;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes jello {
  from,
  11.1%,
  to {
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello:hover {
  animation-name: jello;
  transform-origin: center;
  box-shadow:
    0 0 0.2em blue,
    0 0 0.6em #45f3ff;
  scale: 1.1;
}
</style>
